.container_page {
    height: 100vh;
    width: 100vw;
    overflow: auto;
    background-color: #EFF1F7;

    .select_type {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .selector {
            font-weight: bold;
        }

        view[class*="cuIcon"] {
            margin-left: 12rpx;
            display: inline-block;
        }

        .btn_childType {
            font-size: 48rpx;
            color: #333;
            padding: 0 20rpx;
            border-radius: 20rpx;
            background: white;
        }
    }

    .header {
        margin-bottom: 24rpx;

        .select_type {
            margin-bottom: 48rpx;

            .selector {
                color: white;
                font-size: 38rpx;
            }
        }

        background-color: #335ac6;
        border-radius: 0 0 20rpx 20rpx;
        padding: 24rpx;

        .search {
            .search_bar {
                display: flex;
                line-height: 80rpx;
                font-size: 36rpx;

                .search_input {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    background: white;
                    padding: 0 24rpx;
                    border-radius: 20rpx;

                    input {
                        flex: 1;
                        font-size: 36rpx;
                    }
                }
            }
        }
    }

    .fold {
        width: 0;
    }

    .unfold {
        width: 100vw !important;
    }

    // 折叠部分
    .pane_childType {
        width: 0;
        height: 100vh;
        position: absolute;
        transition: 0.2s;
        top: 0;
        z-index: 999;
        overflow: hidden;

        .layer_mask {
            z-index: -1;
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.2);
        }

        .card_childType {
            width: 65vw;
            height: 100vh;
            padding: 200rpx 24rpx 24rpx;
            border-radius: 0 20rpx 20rpx 0;
            background: white;

            .selector {
                color: #335ac6;
                font-weight: bold;
                font-size: 28rpx;
                margin-bottom: 24rpx;
            }

            .scrollPane {
                overflow-y: auto;
                // 100vh - 卡片顶部內间距 - 标题高 - 折叠面板上下內间距
                max-height: calc(100vh - 200rpx - 36rpx - 48rpx);

                .bar_childType {
                    color: #333;
                    font-size: 28rpx;
                    padding: 24rpx 0;
                    border-bottom: 2rpx solid #ddd;

                    .count {
                        margin-left: 24rpx;
                        display: inline-block;
                        color: #999;
                    }

                    &:active {
                        background: rgba(51, 90, 198, 0.3);
                    }
                }
            }
        }
    }

    .main {

        // 设备详情卡片
        .card_equimpent {
            position: relative;
            padding: 24rpx;
            background-color: white;
            border-radius: 20rpx;
            margin-bottom: 24rpx;

            &::before {
                content: '';
                position: absolute;
                width: 8rpx;
                height: 50%;
                top: 25%;
                left: 0;
                border-radius: 0 8rpx 8rpx 0;
            }

            &::after {
                position: absolute;
                right: 0;
                top: 0;
                color: white;
                line-height: 48rpx;
                font-size: 20rpx;
                padding: 0 24rpx;
                border-radius: 0 20rpx 0 20rpx;
            }

            .title {
                font-weight: bold;
                font-size: 36rpx;
                margin-bottom: 24rpx;
            }

            .count {
                display: flex;
                margin-bottom: 20rpx;

                &>view {
                    flex: 1;
                    text-align: center;

                    .number {
                        color: #333;
                        font-weight: bolder;
                        font-size: 48rpx;
                    }
                }
            }
        }

        // 数量配齐
        .card_equimpent.enough {
            &::before {
                background-color: #335AC7;
            }

            &::after {
                content: '已配齐';
                background: #335AC7;
            }
        }

        // 数量没配齐
        .card_equimpent.scarce {
            &::before {
                background: #E81A1A;
            }

            &::after {
                content: '未配齐';
                background: #E81A1A;
            }
        }
    }
}